<template>
  <el-dialog
    :title="!dataForm.sdiId ? 'create' : 'modify'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    top="6vh"
    class="dialog" 
    @close="closeHandle"
    style="width: 100%; height: 100%; top: 0px; margin: 0 auto;">
    
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">

      <el-form-item label="sdiName" prop="sdiName">
        <el-input v-model="dataForm.sdiName" placeholder="sdiName"></el-input>
      </el-form-item>

      <el-form-item label="retrievalLogic" prop="retrievalLogic">
        <el-container>
          <el-container>
            <el-aside width="320px" class="leftnav">
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                >
                <el-menu-item class="navitem" v-for="(item, index) in navList" :key="index" :data-id="item.id" @click="addSearchTerm(item.id)">
                  <span slot="title">+ {{item.title}}</span>
                </el-menu-item>
              </el-menu>
            </el-aside>

            <el-container>
              <el-main>
                <!-- 选择 -->
                <el-row class="toselect">
                  <!-- 下拉列表 -->
                  <el-row class="top" v-show="selectNum">
                    <el-col :span="5" class="item" v-show="(item1.type == 1)" v-for="(item1, index1) in showList" :key="index1">
                      <div class="tit">{{item1.title}}</div>
                      <div class="list">
                        <div class="litem" :class="item1.selected == index2 ? 'active' : '' " v-for="(item2, index2) in item1.children" :key="index2" @click="selectHandle(item1.id, item2, index2)">{{item2}}</div>
                      </div>
                      <div class="ico" @click="closeTab(item1.id)">
                        <img src="~@/assets/img/sdiclose.png" alt="" />
                      </div>
                    </el-col>
                  </el-row>
        
                  <!-- min to max index5 == 0 ? 'min' : 'max' -->
                  <el-row class="bot" v-show="minNum">
                    <el-col :span="6" class="item" v-show="(item4.type == 3)" v-for="(item4, index4) in showList" :key="index4">
                      <div class="tit">{{item4.title}}</div>
                      <div class="region">
                        <el-row>
                          <el-col class="minmax" :class="(index5 == 0 ? 'showipt' : '')" v-for="(item5, index5) in item4.children" :key="index5" :span="11">
                            <el-input class="ipt" clearable v-model="item5.val" :placeholder="item5.placeholder" @input="mintomax(item4)"></el-input>
                          </el-col>
                        </el-row>
                      </div>
                      <div class="ico" @click="closeTab(item4.id)">
                        <img src="~@/assets/img/sdiclose.png" alt="" />
                      </div>
                    </el-col>
                  </el-row>

                  <!-- 输入框 -->
                  <el-row class="inputBox" v-show="srNum">
                    <el-col :span="6" class="item" v-show="(item3.type == 2)" v-for="(item3, index3) in showList" :key="index3">
                      <div class="tit">{{item3.title}}</div>
                      <div class="region">
                        <el-row>
                          <el-input class="ipt" clearable v-model="item3.val" :placeholder="item3.placeholder" @input="inHandle(item3.val)"></el-input>
                        </el-row>
                      </div>
                      <div class="ico" @click="closeTab(item3.id)">
                        <img src="~@/assets/img/sdiclose.png" alt="" />
                      </div>
                    </el-col>
                  </el-row>

                  <!-- points -->
                  <el-row class="pointBox" v-show="pointNum">
                    <el-col :span="6" class="item" v-show="(item6.type == 4)" v-for="(item6, index6) in showList" :key="index6">
                      <div class="tit">{{item6.title}}</div>
                      <div class="region">
                        <el-row>
                          <el-input class="ipt" clearable v-for="(item7, index7) in item6.children" :key="index7" v-model="item7.val" :placeholder="item7.placeholder" @input="pointHandle(item6)"></el-input>
                        </el-row>
                      </div>
                      <div class="ico" @click="closeTab(item6.id)">
                        <img src="~@/assets/img/sdiclose.png" alt="" />
                      </div>
                    </el-col>
                  </el-row>

                </el-row>

                <!-- 已选择 -->
                <el-row class="hasSelected" v-show="lastparams.length">
                  <el-row class="title">Comfirm</el-row>
                  <el-row class="box">
                    <el-row class="parameters">Parameters</el-row>
                    <el-row class="city">Search in {{lastparams}}</el-row>
                    <el-row class="results" v-show="showResult">Results</el-row>
                    <el-row class="num" v-show="showResult">{{resultsNum}}</el-row>
                  </el-row>
                  <el-row class="use">Use this search?</el-row>
                  <el-row class="anbtn">
                    <el-col class="yes" @click.native="useSearch">Yes</el-col>
                    <el-col class="cancel" @click.native="cancelUseSearch">Cancel</el-col>
                  </el-row>
                </el-row>

                <!-- sort -->
                <el-row class="sort">
                  <!-- <el-col class="txt">Sort By</el-col>
                  <el-col :span="5" class="sort-select">
                    <el-select
                    v-model="sortValue"
                    @change="chickvalue"
                    >
                      <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      v-model="item.value"
                      >
                      {{item.value}}</el-option>
                    </el-select>
                  </el-col> -->
                  <el-col :span="4" class="create" @click.native="createSearch">Create Search</el-col>
                </el-row>

              </el-main>
            </el-container>

          </el-container>
        </el-container>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        navList: [
          {
            'title': 'Keywords',
            'type': 2,
            'val': '',
            'id': 1,
            'placeholder': 'keyword'
          },
          {
            'title': 'status',
            'children': ['Active', 'Pending', 'Closed', 'ActiveUnderContract', 'Hold', 'Withdrawn', 'Expired', 'Delete', 'Incomplete', 'ComingSoon'],
            'type': 1,
            'val': '',
            'id': 2,
            'selected': null
          },
          {
            'title': 'type',
            'children': ['residential', 'rental', 'multifamily', 'condominium', 'commercial', 'land', 'farm'],
            'type': 1,
            'val': '',
            'id': 3,
            'selected': null
          },
          {
            'title': 'subtype',
            'children': ['apartment', 'boatslip', 'singlefamilyresidence', 'deededparking', 'cabin', 'condominium', 'duplex', 'manufacturedhome', 'ownyourown', 'quadruplex', 'stockcooperative', 'townhouse', 'timeshare', 'triplex', 'manufacturedonland'],
            'type': 1,
            'val': '',
            'id': 4,
            'selected': null
          },
          {
            'title': 'agent',
            'type': 2,
            'val': '',
            'id': 5,
            'placeholder': 'listAgent id'
          },
          {
            'title': 'salesAgent',
            'type': 2,
            'val': '',
            'id': 6,
            'placeholder': 'sales.agent id'
          },
          {
            'title': 'brokers',
            'type': 2,
            'val': '',
            'id': 7,
            'placeholder': 'Broker ID'
          },
          {
            'title': 'price',
            'children': [
              {'title': 'minprice', 'val': '', 'placeholder': 'min'},
              {'title': 'maxprice', 'val': '', 'placeholder': 'max'}
            ],
            'type': 3,
            'val': '',
            'id': 8
          },
          {
            'title': 'area',
            'children': [
              {'title': 'minarea', 'val': '', 'placeholder': 'min'},
              {'title': 'maxarea', 'val': '', 'placeholder': 'max'}
            ],
            'type': 3,
            'val': '',
            'id': 9
          },
          {
            'title': 'baths',
            'children': [
              {'title': 'minbaths', 'val': '', 'placeholder': 'min'},
              {'title': 'maxbaths', 'val': '', 'placeholder': 'max'}
            ],
            'type': 3,
            'val': '',
            'id': 10
          },
          {
            'title': 'beds',
            'children': [
              {'title': 'minbeds', 'val': '', 'placeholder': 'min'},
              {'title': 'maxbeds', 'val': '', 'placeholder': 'max'}
            ],
            'type': 3,
            'val': '',
            'id': 11
          },
          {
            'title': 'dom',
            'children': [
              {'title': 'mindom', 'val': '', 'placeholder': 'min'},
              {'title': 'maxdom', 'val': '', 'placeholder': 'max'}
            ],
            'type': 3,
            'val': '',
            'id': 12
          },
          {
            'title': 'year',
            'children': [
              {'title': 'minyear', 'val': '', 'placeholder': 'min'},
              {'title': 'maxyear', 'val': '', 'placeholder': 'max'}
            ],
            'type': 3,
            'val': '',
            'id': 13
          },
          {
            'title': 'acres',
            'children': [
              {'title': 'minacres', 'val': '', 'placeholder': 'min'},
              {'title': 'maxacres', 'val': '', 'placeholder': 'max'}
            ],
            'type': 3,
            'val': '',
            'id': 14
          },
          {
            'title': 'GarageSpaces',
            'children': [
              {'title': 'minGarageSpaces', 'val': '', 'placeholder': 'min'},
              {'title': 'maxGarageSpaces', 'val': '', 'placeholder': 'max'}
            ],
            'type': 3,
            'val': '',
            'id': 15
          },
          {
            'title': 'limit',
            'type': 2,
            'val': '',
            'id': 23
          },
          {
            'title': 'offset',
            'type': 2,
            'val': '',
            'id': 24
          },
          {
            'title': 'lastId',
            'type': 2,
            'val': '',
            'id': 25
          },
          {
            'title': 'vendor',
            'type': 2,
            'val': '',
            'id': 26
          },
          {
            'title': 'postalCodes',
            'type': 2,
            'val': '',
            'id': 27
          },
          {
            'title': 'features',
            'type': 2,
            'val': '',
            'id': 28
          },
          {
            'title': 'exteriorFeatures',
            'type': 2,
            'val': '',
            'id': 29
          },
          {
            'title': 'water',
            'type': 2,
            'val': '',
            'id': 30,
            'placeholder': 'true false LAKE+NAME'
          },
          {
            'title': 'neighborhoods',
            'type': 2,
            'val': '',
            'id': 31
          },
          {
            'title': 'cities',
            'type': 2,
            'val': '',
            'id': 32
          },
          {
            'title': 'counties',
            'type': 2,
            'val': '',
            'id': 33
          },
          {
            'title': 'points',
            'type': 4, // 2
            'val': '',
            'id': 34,
            'children': [
              {'val': '', 'placeholder': 'Longitude,latitude'},
              {'val': '', 'placeholder': 'Longitude,latitude'},
              {'val': '', 'placeholder': 'Longitude,latitude'},
              {'val': '', 'placeholder': 'Longitude,latitude'}
            ]
          },
          {
            'title': 'include',
            'children': ['association', 'agreement', 'garageSpaces', 'maintenanceExpense', 'parking', 'pool', 'rooms', 'taxYear', 'taxAnnualAmount'],
            'type': 1,
            'val': '',
            'id': 35,
            'selected': null
          },
          {
            'title': 'sort',
            'children': ['listprice', '-listprice', 'listdate', '-listdate', 'beds', '-beds', 'baths', '-baths'],
            'type': 1,
            'val': '',
            'id': 36,
            'selected': null
          },
          {
            'title': 'count',
            'children': ['true', 'false'],
            'type': 1,
            'val': '',
            'id': 37,
            'selected': null
          }
        ],
        showList: [],
        selectNum: 0,
        minNum:  0,
        srNum: 0,
        pointNum: 0,
        lastparams: '',
        showResult: false,
        resultsNum: 0,
        options: [
          {
            value: '+listdate',
            label: 'listdate↑'
          }, 
          {
            value: '-listdate',
            label: 'listdate↓'
          }, 
          {
            value: '+listprice',
            label: 'listprice↑'
          }, 
          {
            value: '-listprice',
            label: 'listprice↓'
          }, 
          {
            value: '+beds',
            label: 'beds↑'
          }, 
          {
            value: '-beds',
            label: 'beds↓'
          }, 
          {
            value: '+baths',
            label: 'baths↑'
          },
          {
            value: '-baths',
            label: 'baths↓'
          }
        ],
        sortValue: '',
        resultObj: {},
        dataForm: {
          sdiId: 0,
          sdiName: '',
          retrievalLogic: {}
        },
        dataRule: {
          sdiName: [
            { required: true, message: 'sdiName Not null', trigger: 'blur' }
          ]
        },
        checkLogic: true
      }
    },
    methods: {
      initialization (id) {
        this.visible = true
        this.dataForm.sdiId = id || 0
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.sdiId) {
            this.$http({
              url: this.$http.adornUrl(`/contMachining/sdi/info/${this.dataForm.sdiId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                console.log('----- 获取详情成功: -----', data.sdi)
                this.dataForm.sdiName = data.sdi.sdiName
                this.dataForm.retrievalLogic = JSON.parse(data.sdi.retrievalLogic)
                this.resultObj = JSON.parse(data.sdi.retrievalLogic)
                var newGetObj = JSON.parse(data.sdi.retrievalLogic)
                console.log('----- 结果 -----', this.resultObj)

                // 处理
                for(var ke in newGetObj) {
                  if(typeof(newGetObj[ke]) == 'function') {
                    delete newGetObj[ke]
                  }
                }
                this.editResultObj = newGetObj
                var newLists = []

                var navList = this.navList
                if(navList && navList.length) {
                  navList.map((item, index, arr) => {
                    for(var k1 in newGetObj) {
                    
                      if(item.title == k1) {
                        if(k1 !== 'points') {
                          item.val = newGetObj[k1]
                        }
                        
                        newLists.push(item)
                      }

                      if(item.children && item.children.length) {
                        item.children.map((item1, index1, arr1) => {
                         
                          if(item.type == 1) {
                            if(item1 == item.val) {
                              item.selected = index1
                            }
                          }
                          
                          // min max
                          if(item.type == 3) {
                            if(item1.title == k1) {
                              item1.val = newGetObj[k1]
                              newLists.push(item)
                            }
                          }

                          // points
                          if(item.type == 4) {
                            if(item.title == k1) {
                              item1.val = newGetObj[k1][index1]
                            }
                          }
                        
                        })
                      }
                    }
                  })
                }

                // 处理
                var removalLists = []
                for(var i = 0; i < newLists.length; i++){
                  var flag = true
                  for(var j = 0; j < removalLists.length; j++){
                    if(newLists[i].title == removalLists[j].title){
                      flag = false
                    };
                  }
                  if(flag){
                    removalLists.push(newLists[i])
                  }
                }

                this.showList = removalLists
                this.getTypeNum()
                var displayList = removalLists
                var string = ''
                if(displayList && displayList.length) {
                  displayList.map((item1, index1, arr1) => {
                    if(item1.val) {
                      string += item1.title + '=' + item1.val + ','
                    }
                    // 1 下拉 2 输入框  3 min-max 4-points
                    if(item1.type == 3 && item1.children && item1.children.length) {
                      item1.children.map((item2, index2, arr2) => {
                        if(item2.val) {
                          string += item2.title + '=' + item2.val + ','
                        }
                      })
                    }

                    if(item1.type == 4 && item1.children && item1.children.length) {
                      string += item1.title + '=['
                      item1.children.map((item3, index3, arr3) => {
                        if(item3.val) {
                          string += (index3 < arr3.length - 1) ? (item3.val + ',') : item3.val
                        }
                      })
                      string += '],'
                    }

                  })
                }
                this.lastparams = string
              }
            })
          } else {
            this.showList = []
            this.selectNum = 0
            this.minNum = 0
            this.srNum = 0
            this.pointNum = 0
            this.dataForm.retrievalLogic = {}
            this.resultObj = {}
            this.lastparams = ''
          }
        })
      },
      closeHandle () {
        this.lastparams = ''
        this.showResult = false
        var slist = this.showList

        if(slist && slist.length) {
          slist.map((item, index, arr) => {
            item.val = ''
            item.type == 1 ? (item.selected = null) : ''
            if(item.children && item.children.length) {
              item.children.map((item2, index2, arr2) => {
                if(item2.val) {
                  item2.val = ''
                }
              })
            }
          })
        }

        this.showList = slist
        this.showList = []

      },
      commandHandle (e) {
        console.log(e)
      },
      // 点击 -- nav
      addSearchTerm (id) {
        var id1 = id
        var navList = this.navList
        var theShowList = this.showList
        
        // 1 生成对应tab
        navList.map((item, index, arr) => {
          if(item.id == id1) {
            theShowList.push(item)
          }
        })

        // 处理
        var removalList = []
        for(var i = 0; i < theShowList.length; i++){
          var flag = true
          for(var j = 0; j < removalList.length; j++){
            if(theShowList[i].id == removalList[j].id){
              flag = false
            };
          }
          if(flag){
            removalList.push(theShowList[i])
          }
        }

        // var newRemovalList = JSON.stringify(removalList)
        // var linRemovalList = JSON.parse(newRemovalList)
        // if(linRemovalList && linRemovalList.length) {
        //   linRemovalList.map((item, index, arr) => {
        //     if(item.title == 'Keywords') {
        //       item.title = 'q'
        //     }
        //   })
        // }

        this.showList = removalList
        this.getTypeNum()
        this.getParams()
      },
      getTypeNum() {
        var selectNum = 0
        var minNum = 0
        var srNum = 0
        var pointNum = 0
        if(this.showList && this.showList.length) {
          this.showList.map((item, index, arr) => {
            if(item.type == 1) {
              selectNum = selectNum + 1
            } else if(item.type == 3) {
              minNum = minNum + 1
            } else if(item.type == 2) {
              srNum = srNum + 1
            } else {
              pointNum = pointNum + 1
            }
          })
          this.selectNum = selectNum
          this.minNum = minNum
          this.srNum = srNum
          this.pointNum = pointNum
        } else {
          this.selectNum = 0
          this.minNum = 0
          this.srNum = 0
          this.pointNum = 0
        }
      },
      getParams() {
        var displayList = this.showList
        var string = ''
        if(displayList && displayList.length) {
          displayList.map((item1, index1, arr1) => {
            if(item1.val) {
              string += item1.title + '=' + item1.val + ','
            }

            if(item1.type == 3 && item1.children && item1.children.length) {
              item1.children.map((item2, index2, arr2) => {
                if(item2.val) {
                  string += item2.title + '=' + item2.val + ','
                }
              })
            }

            if(item1.type == 4 && item1.children && item1.children.length) {
              var pointStr = ''
              item1.children.map((item2, index2, arr2) => {
                if(item2.val) {
                  if(index2 < arr2.length -1) {
                    pointStr += item2.val + ', '
                  } else {
                    pointStr += item2.val
                  }
                  // pointStr += (index2 < arr2.length -1) ? (item2.val + ', ') : item2.val
                }
              })
              string += item1.title + '=' + `[${pointStr}]` + ','
            }

          })
        }
        this.lastparams = string

        var resultObj = {}
        var test = string
        var seidx = test.lastIndexOf(',')
        var newstr = test.substr(0, seidx)
        var arr = newstr.split(',')

        if(arr && arr.length) {
          for(var i = 0 ; i < arr.length; i++) {
            if(arr[i].indexOf('=')) {
              var theIdx = arr[i].indexOf('=')
              var k = arr[i].substr(0, theIdx)
              var v = arr[i].substring(theIdx+1)
              resultObj[k] = v
            }
          }
        }

        if(displayList && displayList.length) {
          displayList.map((item2, index2, arr2) => {
            if(item2.title == 'points' && item2.type == 4 && item2.children && item2.children.length) {
              var pointStr = ''
              item2.children.map((item3, index3, arr3) => {
                if(item3.val) {
                  pointStr += (index3 < arr3.length -1) ? (item3.val + ',') : item3.val
                }
              })
              resultObj[item2.title] = `[${pointStr}]`
            }
          })
        }

        this.resultObj = resultObj
        this.dataForm.retrievalLogic = resultObj

        var jw1 = ''
        var jw2 = ''
        var jw3 = ''
        var jw4 = ''
        var totjw = ''
        for(var k in resultObj) {
          if (k === 'points') {
            var pointsValue = resultObj[k]
            var bef = pointsValue.indexOf('[') + 1
            var aft = pointsValue.lastIndexOf(']') - 1
            var pointsValue1 = pointsValue.substr(bef, aft)
            var newPoints = []
            var zharr = pointsValue1.split(',')

            if (zharr && zharr.length) {
              zharr.map((item, index, arr) => {
                item = item * 1
                newPoints.push(item)
              })
            }

            if (newPoints && newPoints.length) {
              for (var i = 0; i < newPoints.length; i++) {
                if (i < 2) {
                  jw1 = newPoints[0] + ',' + newPoints[1]
                }
                if (i < 4) {
                  jw2 = newPoints[2] + ',' + newPoints[3]
                }
                if (i < 6) {
                  jw3 = newPoints[4] + ',' + newPoints[5]
                }
                if (i < 8) {
                  jw4 = newPoints[6] + ',' + newPoints[7]
                }
              }
            }
            var newArray = []
            newArray.push(jw1)
            newArray.push(jw2)
            newArray.push(jw3)
            newArray.push(jw4)
            // totjw = '"' + jw1 + '","' + jw2 + '","' + jw3 + '","' + jw4 + '"'
            // var firstone = totjw.indexOf('"') + 1
            // var lastone = totjw.lastIndexOf('"') - 1
            // var newTotjw = totjw.substr(firstone, lastone)
            resultObj[k] = newArray
          }
        }
        this.resultObj = resultObj
        this.dataForm.retrievalLogic = resultObj
      },
      closeTab (id) {
        var id1 = id
        var theShowList = this.showList

        if (theShowList && theShowList.length) {
          theShowList.map((item, index, arr) => {
            if (item.id == id1) {
              item.val = ''
              item.type == 1 ? (item.selected = null) : ''
              if (item.children && item.children.length) {
                item.children.map((item2, index2, arr2) => {
                  if (item2.val) {
                    item2.val = ''
                  }
                })
              }
              theShowList.splice(index, 1)
            }
          })
        }

        this.showList = theShowList
        if (!this.showList.length) {
          this.showResult = false
        }

        this.getTypeNum()
        this.getParams()
      },
      inHandle (e) {
        this.getParams()
      },
      mintomax (it) {
        this.getParams()
      },
      selectHandle (id, item, idx) {
        var theId = id
        var theItem = item
        var theIndex = idx
        var theShowList = this.showList
        if (theShowList && theShowList.length) {
          theShowList.map((item, index, arr) => {
            if (item.id == theId) {
              item.val = theItem
              item.selected = idx
            }
          })
        }
        this.showList = theShowList
        this.getParams()
      },
      pointHandle (item) {
        this.getParams()
      },
      // 点击 -- use search
      useSearch () {
        var resultObj = this.resultObj
        this.resultsNum = ''
        var _this = this
        console.log('----- 查询房产传参 -----', resultObj)

        _this.$http({
          url: _this.$http.adornUrl('/crm/sply/properties'),
          method: 'post',
          data: _this.$http.adornData(resultObj)
        }).then(({ data }) => {

          if (data && data.code === 0) {
            console.log('----- 获取房产成功 -----', data)
            _this.showResult = true
            _this.resultsNum = data.resultsNum ? data.resultsNum : 0
          } else {
            _this.showResult = false
            _this.resultsNum = 0
            _this.$message.error(data.msg, 1)
          }
        }).catch(({ error }) => {
          console.log('----- error -----', error)
          _this.showResult = false
          _this.resultsNum = 0
          _this.$message.error(data.msg, 1)
        })
      },
      cancelUseSearch () {
        this.selectNum = 0
        this.minNum = 0
        this.srNum = 0
        this.pointNum = 0
        this.lastparams = ''
        this.showResult = false
        this.resultsNum = 0
        this.resultObj = {}
        this.dataForm.retrievalLogic = {}
        var slist = this.showList
        if (slist && slist.length) {
          slist.map((item, index, arr) => {
            item.val = ''
            item.type == 1 ? (item.selected = null) : ''
            if (item.children && item.children.length) {
              item.children.map((item2, index2, arr2) => {
                if (item2.val) {
                  item2.val = ''
                }
              })
            }
          })
        }

        this.showList = slist
        this.showList = []
      },
      chickvalue () {
        console.log(this.sortValue)
      },
      createSearch () {
        var _this = this
        _this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if(_this.dataForm.sdiId) {
              var params1 = {
                'sdiId': _this.dataForm.sdiId,
                'sdiName': _this.dataForm.sdiName,
                'retrievalLogic': JSON.stringify(_this.resultObj)
              }
            } else {
               var params1 = {
                'sdiName': _this.dataForm.sdiName,
                'retrievalLogic': JSON.stringify(_this.resultObj)
              }
            }
            console.log('----- create Search 传参 -----', params1)
            _this.$http({
              url: _this.$http.adornUrl(`/contMachining/sdi/${!_this.dataForm.sdiId ? 'save' : 'update'}`),
              method: 'post',
              data: _this.$http.adornData(params1)
            }).then(({data}) => {
              if (data && data.code === 0) {
                _this.$message.success('success', 1, function () {
                  _this.visible = false
                  _this.$emit('refreshDataList')
                })
              } else {
                _this.$message.error(data.msg, 1)
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
el-input,
.el-input__inner {
  font-size: 18px!important;
  font-weight: bold;
  color: rgba(42,42,42,1);
}
.dialog /deep/ .el-dialog {
  width: 100%;
  margin: 0 auto;
  margin-top: 0vh!important;
  font-family:Arial;
}

// /deep/  .el-dialog__wrapper {
//   padding-bottom: 50px;
// }

.el-dialog /deep/ .el-dialog__header {
  padding: 5px 20px 10px;
}

/deep/ .el-dialog__headerbtn {
  position: absolute;
  top: 0!important;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}

/deep/ .el-dialog__body {
  height: 830px!important;
  padding: 10px!important;
}

/deep/  .el-main {
  padding: 0;
}

// 左侧
.leftnav {
  padding: 10px;
  height: 762px;
  background:rgba(255,255,255,1);
  border:1px solid rgba(230,230,230,1);
  border-radius:4px;
  margin-right: 10px;
  overflow-y: scroll;
}
.el-menu-vertical-demo {
  border: 0;
  .navitem {
    height:45px;
    line-height: 45px;
    background:rgba(203,239,238,1);
    border:1px solid rgba(172,211,215,1);
    border-radius:2px;
    margin: 0 auto 5px;
    font-size:16px;
    font-weight:bold;
    color:rgba(67,67,67,1);
  }
}

// 选择
.toselect {
  margin-bottom: 10px;
  // 下拉列表
  .top {
    border: 1px solid rgba(230,230,230,1);
    border-radius: 4px;
    padding: 20px 20px 0;
    .item {
      padding: 10px 10px 15px;
      width:264px;
      height:260px;
      background:rgba(246,246,246,1);
      border:2px solid rgba(232,232,232,1);
      border-radius:4px;
      margin-right: 16px;
      margin-bottom: 20px;
      position: relative;
      .tit {
        // padding-top: 9px;
        font-size:16px;
        font-weight:bold;
        color:rgba(67,67,67,1);
        margin-bottom: 5px;
      }
      .list {
        height:197px;
        padding: 10px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(230,230,230,1);
        border-radius:4px;
        overflow-y: scroll;
        .litem {
          height: 32px;
          line-height: 32px;
          padding: 0 10px;
          border-bottom: 1px solid #F8F8F8;
          font-size:16px;
          font-weight:bold;
          color:rgba(42,42,42,1);
          cursor: pointer;
          &.active {
            background:rgba(212,212,212,1);
          }
        }
      }
      .ico {
        width: 22px;
        height: 22px;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 999;
        img {
          width: 22px;
          height: 22px;
          display: block;
        }
      }
    }
  }
   
  // min to max
  .bot {
    border:1px solid rgba(230,230,230,1);
    border-radius: 4px;
    padding: 20px 20px 0;
    // border-top: 0;
    .item {
      padding: 10px 10px 15px;
      width: 298px;
      height: 100px;
      background: rgba(246,246,246,1);
      border: 2px solid rgba(232,232,232,1);
      border-radius: 4px;
      margin-right: 16px;
      margin-bottom: 20px;
      position: relative;
      .tit {
        // padding-top: 9px;
        font-size: 16px;
        font-weight: bold;
        color: rgba(67,67,67,1);
        margin-bottom: 5px;
      }
      .region {
        font-size: 16px;
        font-weight: bold;
        color: rgba(67,67,67,1);
        .minmax {
          margin-right: 22px;
          &:last-child {
            margin-right: 0;
          }
          .ipt {
            outline: 0;
            height: 38px;
            line-height: 38px;
            font-size: 18px;
            font-weight: bold;
            color: rgba(42,42,42,1);
            .el-input__inner {
              background: #fff;
              border: none;
              outline: none;
              border: 1px solid rgba(230,230,230,1);
              border-radius: 4px;
            }
          }
          &.showipt:after {
            content: 'to';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
          }
        }
      
      }
      .ico {
        width: 22px;
        height: 22px;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 999;
        img {
          width: 22px;
          height: 22px;
          display: block;
        }
      }
    }
  }

  // 输入框
  .inputBox {
    border:1px solid rgba(230,230,230,1);
    border-radius: 4px;
    padding: 20px 20px 0;
    // border-top: 0;
    .item {
      padding: 10px 10px 15px;
      width: 298px;
      height: 100px;
      background: rgba(246,246,246,1);
      border: 2px solid rgba(232,232,232,1);
      border-radius: 4px;
      margin-right: 16px;
      margin-bottom: 20px;
      position: relative;
      .tit {
        // padding-top: 9px;
        font-size: 16px;
        font-weight: bold;
        color: rgba(67,67,67,1);
        margin-bottom: 5px;
      }
      .region {
        font-size: 16px;
        font-weight: bold;
        color: rgba(67,67,67,1);
        .ipt {
          outline: 0;
          height: 38px;
          line-height: 38px;
          font-size: 18px;
          font-weight: bold;
          color: rgba(42,42,42,1);
          .el-input__inner {
            background: #fff;
            border: none;
            outline: none;
            border: 1px solid rgba(230,230,230,1);
            border-radius: 4px;
          }
        }
        .to {
          height: 38px;
          line-height: 38px;
          text-align: center;
        }
      }
      .ico {
        width: 22px;
        height: 22px;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 999;
        img {
          width: 22px;
          height: 22px;
          display: block;
        }
      }
    }
  }

  // point
  .pointBox {
    border:1px solid rgba(230,230,230,1);
    border-radius: 4px;
    padding: 20px 20px 0;
    .item {
      padding: 10px 10px 15px;
      width: 600px;
      background: rgba(246,246,246,1);
      border: 2px solid rgba(232,232,232,1);
      border-radius: 4px;
      margin-right: 16px;
      margin-bottom: 20px;
      position: relative;
      .tit {
        // padding-top: 9px;
        font-size: 16px;
        font-weight: bold;
        color: rgba(67,67,67,1);
        margin-bottom: 5px;
      }
      .region {
        font-size: 16px;
        font-weight: bold;
        color: rgba(67,67,67,1);
        .ipt {
          width: 49%;
          outline: 0;
          height: 38px;
          line-height: 38px;
          font-size: 18px;
          font-weight: bold;
          color: rgba(42,42,42,1);
          margin-right: 10px;
          margin-bottom: 10px;
          &:nth-child(2n) {
            margin-right: 0;
          }
          .el-input__inner {
            background: #fff;
            border: none;
            outline: none;
            border: 1px solid rgba(230,230,230,1);
            border-radius: 4px;
          }
        }
        .to {
          height: 38px;
          line-height: 38px;
          text-align: center;
        }
      }
      .ico {
        width: 22px;
        height: 22px;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 999;
        img {
          width: 22px;
          height: 22px;
          display: block;
        }
      }
    }
  }


}

// 已选择
.hasSelected {
  // height:300px;
  padding: 20px;
  background:rgba(248,223,221,1);
  border:1px solid rgba(222,195,193,1);
  border-radius:4px;
  margin-bottom: 35px;
  color:rgba(103,103,103,1);
  .title {
    font-size:16px;
    font-weight:bold;
    margin-bottom: 15px;
  }
  .box {
    padding: 10px;
    // height:134px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(222,195,193,1);
    border-radius:4px;
    font-size:16px;
    font-weight:bold;
    margin-bottom: 13px;
    .parameters {
      // margin-bottom: 5px;
    }
    .city {
      color:rgba(42,42,42,1);
      margin-bottom: 10px;
      word-wrap: break-word; 
      word-break: normal; 
    }
    .results {
      // margin-bottom: 5px;
    }
    .num {
      color:rgba(42,42,42,1);
    }
  }
  .use {
    font-size:16px;
    font-weight:bold;
    color:rgba(103,103,103,1);
    margin-bottom: 15px;
  }
  .anbtn {
    .yes {
      width:72px;
      height:38px;
      line-height: 38px;
      text-align: center;
      background:rgba(117,165,225,1);
      border:1px solid rgba(91,140,202,1);
      border-radius:8px;
      margin-right: 20px;
      cursor: pointer;
    }
    .cancel {
      width:92px;
      height:38px;
      line-height: 38px;
      text-align: center;
      background:rgba(223,200,198,1);
      border:1px solid rgba(211,179,176,1);
      border-radius:8px;
      cursor: pointer;
      &:hover {
        background:rgba(117,165,225,1);
      }
    }
  }
}

// sort
.sort {
  padding-left: 20px;
  .txt {
    width: 71px;
    height: 37px;
    line-height: 37px;
    font-size:16px;
    font-weight:bold;
    color:rgba(103,103,103,1);
  }
  .sort-select {
    width:200px;
    height:37px;
    line-height: 37px;
    margin-right: 10px;
    .drop {
      width: 100%;
      .more {
        width:200px;
        background:rgba(251,251,251,1);
        border:1px solid rgba(207,207,207,1);
        font-weight:bold;
        color:rgba(42,42,42,1);
        .pic {
          width: 8px;
          height: 14px;
          position: absolute;
          top: 12px;
          right: 8px;
          z-index: 999;
        }
      }
    }

  }
  .create {
    width:150px;
    height:37px;
    line-height: 37px;
    text-align: center;
    background:rgba(111,199,126,1);
    border:1px solid rgba(100,161,112,1);
    border-radius:8px;
    font-size:18px;
    font-weight:bold;
    color:rgba(255,255,255,1);
    cursor: pointer;
  }
}

</style>
